<template>
	<view class="flex_ZC">
		<!-- #ifdef H5 || MP-WEIXIN -->
		<uNavbar title="买家评价"> </uNavbar>
		<!-- #endif -->
		
		<view class="reviews flex_ld">
			<view class="reviews_l flex_dq">
				<view class="reviews_box" v-for="(item,index) in list1" :key="index"
					:class="item.id == inx1 ?'active1':''" @click="clickQie(item)">
					<text>{{item.name}}</text>
					<text v-if="item.id != 1">{{item.number}}</text>
				</view>
			</view>
			<view class="reviews_r flex_dq">
				<text v-for="(item,index) in list2" :key="index" :class="index == inx2 ?'active2':''"
					@click="clickQie2(index)">{{item}}</text>
			</view>
		</view>

		<view v-if="rateList.length>0">
			<view class="evaluate flex_Z" v-for="(item,index) in rateList" :key="index">
				<view class="flex_ld">
					<view class="evaluate_top flex_dq">
						<image :src="item.user_avatar" mode="aspectFill"></image>
						<text class="f26 c3 overflow1">{{item.user_name}}</text>
					</view>
					<view class="score">
						<u-rate activeColor="#FFC300" readonly v-model="item.score"></u-rate>
					</view>
				</view>
				<view class="mart14">
					<text class="f24 c3 overflow2 mart10">{{item.content}}</text>
					<view v-if="item.images.length>0">
						<view class="contents_img flex_dq" >
							<image v-for="(item2,index2) in item.images" :key="index2" :src="item2.img" mode="aspectFill" @click="previewImg(item.images)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="rateList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {evaluate} from "../../api/local.js"
	export default {
		data() {
			return {
				page: 1,
				size: 20,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				inx1: 1,
				inx2: 0,
				ids:'',
				types:'all',
				time:'create_time',
				rateValue: 3,
				list1: [{
					id: 1,
					name: '全部',
					number: '',
					value:'all'
				}, {
					id: 2,
					name: '有图',
					number: '',
					value:'images'
				}],
				list2: ['默认排序', '时间排序'],
				rateList: []
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.initList()
		},
		methods: {
			// 全部/有图
			clickQie(item) {
				console.log(item);
				this.inx1 = item.id
				this.types = item.value
				this.refreshArray()
			},
			// 默认/时间
			clickQie2(index) {
				this.inx2 = index
				this.refreshArray()
			},
			// 清空内容
			refreshArray() {
				this.page = 1,
					this.rateList = [],
					this.initList()
			},
			// 初始化
			initList() {
				let data = {
					page:this.page,
					page_size:this.size,
					seller_id:this.ids,
					type:this.types,
					sort_field:this.time,
					sort_by:this.inx2?'desc':'asc',
				};
				evaluate(data).then(res=>{
					// console.log('商品列表',res.data.iamges_count)
					this.list1[1].number = res.data.images_count
					console.log(this.list1[1].number,"009090909")
					let list = res.data.list.data;
					this.rateList = this.page == 1 ? list : this.rateList.concat(list);
					console.log(this.rateList);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			},
			// 预览图片
			previewImg(res) {
				let imgAll = [];
				res.forEach((item)=>{
					imgAll.push(item.img)
				})
				// console.log(imgAll);
				// 预览图片
				uni.previewImage({
					urls: imgAll,
					longPressActions: {
						success: function(data) {
							console.log(data);
						}
					}
				});
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.types = 'all'
				that.inx1 = 1
				that.inx2 = 0
				that.time = 'create_time'
				that.refreshArray()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
	.reviews {
		width: 750rpx;
		background: #ffffff;
		padding: 16rpx 30rpx;
	}

	.reviews_l {}

	.reviews_box {
		font-size: 30rpx;
		color: #999999;
		padding: 10rpx 38rpx;
		border-radius: 40rpx;
		border: 2rpx solid #999999;
		margin-right: 32rpx;
	}

	.active1 {
		background: #FFC300;
		color: #ffffff !important;
		border: none !important;
	}

	.active2 {
		color: #FFC300 !important;
	}

	.reviews_r {
		position: relative;
	}

	.reviews_r>text {
		font-size: 28rpx;
		color: #666666;
		margin-left: 32rpx;
	}

	.reviews_r::before {
		content: '';
		position: absolute;
		top: 8rpx;
		left: 55%;
		transform: translateX(-50%);
		width: 2rpx;
		height: 26rpx;
		background: #D8D8D8;
	}

	.evaluate {
		width: 690rpx;
		padding: 28rpx 24rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin-top: 26rpx;
	}
	.mart10{
		margin-top: 10rpx;
	}

	.evaluate_top>image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}
	.evaluate_top>text{
		width: 350rpx;
	}

	.score {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 220rpx;
		/* background: pink; */
	}

	.contents_img {
		margin-top: 16rpx;
	}

	.contents_img>image {
		width: 208rpx;
		height: 208rpx;
		border-radius: 12rpx;
		margin: 4rpx;
	}
</style>